<template>
    <div class="appmain">
        <div class="gobastyle">
          <span><i @click="goback"  class="iconfont icon-fanhui"></i></span>
        </div>
        <div class="main-child">
          <div class="txun">本层工单</div>
          <div class="iconset">
            <span :class="['property', 'iconcommon',{'propertyBack':this.energycla ==1}]" @click="pCkicl(1)">
              <span :class="['iconfont', 'icon-weixiu-copy',{'activezichan':this.energycla ==1}]"></span>
              <span>&nbsp;公共维修</span>
            </span>
            <span  :class="['tour', 'iconcommon',{'tourtyBack':this.energycla ==2}]" @click="ptour(2)">
              <span :class="['iconfont', 'icon-xunjian',{'patrol':this.energycla ==2}]"></span>
              <span>&nbsp;巡检单</span>
            </span>
            <span  :class="['upkeep', 'iconcommon',{'upkeepBack':this.energycla ==3}]" @click="pupkeep(3)">
              <span :class="['iconfont', 'icon-14024',{'maintain':this.energycla ==3}]">
              </span><span>&nbsp;保养单</span>
            </span>
            <span :class="['cost', 'iconcommon',{'costBack':this.energycla ==4}]" @click="pcost(4)">
              <span :class="['iconfont', 'icon-qita',{'service':this.energycla ==4}]"></span>
              <span>&nbsp;其他</span>
            </span>
          </div>
          <div class="commonstr str1 addtop">
              <div class="next-title"><span>·&nbsp;本层工单数</span><span class="title-number"><span style="color:#16cdff">28</span>&nbsp;个</span></div>
              <div class="detail">
                  <div ref="main" style="width:100%;height:100%;"></div>
              </div>
          </div>
          <floorChange style="top:0"></floorChange>
       </div>
    </div>
</template>

<script>
var echarts = require("echarts");
import { debounce } from "../../../utils"
import floorChange from '../child/floorChange'
export default {
  name: "workorderfloor",
  data() {
    return {
      activeName2: 'first',
      chart: null,
      startCharts: null,
      energycla: null
    };
  },
  components: {
    floorChange
  },
  mounted() {
    this.initChartone();
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy () {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
    clearInterval(this.startCharts)
  },
  methods: {
    pCkicl(num) {
      // WebMouseClickEvent("eventClick_003");
      // this.energycla = num;
    },
    ptour(num) {
      // WebMouseClickEvent("eventClick_003");
      // this.energycla = num;
    },
    pupkeep(num) {
      // WebMouseClickEvent("eventClick_003");
      // this.energycla = num;
    },
    pcost(num) {
      // WebMouseClickEvent("eventClick_003");
      // this.energycla = num;
    },
     // 返回按钮
    goback(){
      viewBackFromFloorToBudling();
      this.$router.push({path: '/home/workorder'});
    },
    // eachart
    initChartone() {
      let isSet = true
      let _this = this
      this.chart = echarts.init(this.$refs.main);
      this.chart.on('mouseover', function (param) {
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        isSet = false
      })
      this.chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          isSet = true
        }
      })
      var option = {
        color: ["#8370fe", "#ffa729", "#00a0ea", "#43c561"],
        tooltip: {
          formatter: "{a}<br>{b}: {c} ({d}%)",
          fontSize: "13",
        },
        legend: {
          data: ['公共维修', '巡检单', '', '保养单', '其他'],
          icon: 'rect',
          selectedMode:false,
          right: '30px',
          top: 'center',
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '本层工单',
            type: "pie",
            radius: ["50%", "70%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 8, name: "公共维修" },
              { value: 6, name: "巡检单" },
              { value: 3, name: "保养单" },
              { value: 11, name: "其他" }
            ]
          }
        ]
      };
      //设置series
      this.chart.setOption(option);
      app.currentIndex = -1;

      var chartHover = function(){
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
      }
      // console.log(isSet)
      this.startCharts = setInterval(chartHover, 2000);
    },
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #ff6661;
$iconcolor1: #8370fe;
$iconcolor2: #00a0ea;
$iconcolor3: #8370fd;
$iconcolor4: #15cdff;
$fontcolor1: #00a0ea;
$fontcolor2: #ffa628;
$fontcolor3: #6859be;
$fontcolor4: #2dd2ff;
$fontcolor5: #ff7670;
$fontcolor6: #f9f41f;
$fontcolor7: #00ff01;
$fontcolor8: #016bfb;
$mrtop: 8px;
.appmain {
  height: 100%;
  // margin-top: 20px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  .gobastyle{
    width: 40px;
    height: 40px;
    // background-color: salmon;
    position: absolute;
    right: 11%;
    top: 50px;
    .icon-fanhui{
      font-size: 0.30rem;
      color: white;
      position: absolute;
      z-index: 1;
      cursor: pointer;
    }
  }
  .mainicon{
    position: absolute;
    top:-40px;
    right: 0;
    color: #ddd;
    span{
      width: 40px;
      .iconfont{font-size: 24px;}
    }
  }
  .addstyle{
    top: -67px;
    // right: 55px;
    right: 13%;
  }
  .main-child {
    height: 70%;
    width: 100%;
    position: absolute;
    top: 25%;
    padding: 15px;
    .addtop {
      margin-top: $mrtop;
    }
    // 公用样式
    .txun {
       height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left:25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size:100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .commonstr {
      width: 94%;
      margin-left: 3%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .next-title {
      width: 100%;
      border-bottom: 2px solid $borderbottom;
      padding: 8px;
      .title-number {
        float: right;
      }
    }
    .iconset {
        height: 35px;
        width: 94%;
        margin-left: 3%;
        margin-top: 8px;
        .iconcommon {
          float: left;
          width: 24.8%;
          height: 100%;
          text-align: center;
          line-height: 35px;
          color: white;
          background: rgba($color: black, $alpha: 0.5);
          // cursor: pointer;
        }
        .iconfont{
          color: #016bfb;
          font-size: 0.20rem;
          position: relative;
          top:2px;
        }
        // 1
        .propertyBack{//点击事件 没有加
          background: rgba($color: #2b3c5a, $alpha: 0.8);
        }
        .activezichan{//点击事件 没有加
          color: #0790d4;
          font-weight: 700;
        }
        .property {
          margin-right: 1px;
        }
        .icon-zichan{//暂时性的默认显示事件
          color: #0790d4;
          font-weight: 700;
        }
        .property:hover {//鼠标悬浮事件
          // background: rgba($color: #2b3c5a, $alpha: 0.8);
           .icon-zichan{
              color: #0790d4;
              font-weight: 700;
            }
        }
        // 2
        .tourtyBack{//点击事件 没有加
           background: rgba($color: #2b3c5a, $alpha: 0.8);
        }
        .patrol{//点击事件 没有加
          color: #6600CC;
          font-weight: 800;
        }
        .tour {
          margin-right: 1px;
        }
        .icon-xunjian{//暂时性的默认显示事件
            color: #6600CC;
            font-weight: 800;
          }
        .tour:hover{//鼠标悬浮事件
          // background: rgba($color: #2b3c5a, $alpha: 0.8);
          .icon-xunjian{
            color: #6600CC;
            font-weight: 800;
          }
        }
        // 3
        .upkeepBack{//点击事件 没有加
           background: rgba($color: #2b3c5a, $alpha: 0.8);
        }
        .maintain{//点击事件 没有加
          color: #fea934;
          font-weight: 700;
        }
        .upkeep {
          margin-right: 1px;
        }
        .icon-14024{//暂时性的默认显示事件
            color: #fea934;
            font-weight: 700;
          }
        .upkeep:hover {//鼠标悬浮事件
          //  background: rgba($color: #2b3c5a, $alpha: 0.8);
          .icon-14024{
            color: #fea934;
            font-weight: 700;
          }
        }
        // 4
        .costBack{//点击事件 没有加
           background: rgba($color: #2b3c5a, $alpha: 0.8);
        }
        .service{//点击事件 没有加
          color: #00ff01;
          font-weight: 700;
        }
        .icon-weixiu-copy{//暂时性的默认显示事件
            color: #00ff01;
            font-weight: 700;
        }
        .cost:hover{//鼠标悬浮事件
          // background: rgba($color: #2b3c5a, $alpha: 0.8);
          .icon-weixiu-copy{
            color: #00ff01;
            font-weight: 700;
          }
        }
      }
    // 运维成本
    .str1 {
      height: 35%;
      .detail {
        margin: 0;
        font-size: 0;
        height: 82%;
        width: 100%;
      }
    }
  }
}
</style>